class Drag{
    static zIndex = 1;
    private el: any;
    private x: number;
    private y: number;
    private option: object;

    constructor(el: any,option={}){
        this.el = el;
        this.x=0;
        this.y=0;
        this.option = option;
        this.init();
    }
    init(){
        this.setEleStyle(this.option||{});
        this.el.onmousedown =(ev: MouseEvent)=>{
            this.onMouseDown(ev)
            this.el.setCapture&&this.el.setCapture() //全局捕获
            return false
        }

    }
    //样式设置
    setEleStyle(option: any){
        for (const key in option) {
            this.el.style[key] = option[key]
        }
    }

    //按下ele
    onMouseDown(e: MouseEvent){
        let zIndex: any = getComputedStyle(this.el).getPropertyValue('z-index');
        zIndex=isNaN(zIndex)?1:zIndex
        Drag.zIndex =Drag.zIndex>zIndex?Number(Drag.zIndex)+1:Number(zIndex)+1
        this.setEleStyle({"zIndex":Drag.zIndex,position:'fixed','cursor': 'move'})
        this.x = e.clientX-this.el.offsetLeft;
        this.y= e.clientY-this.el.offsetTop;
        document.onmousemove=(e)=>this.onMouseMove(e);
        document.onmouseup = (e)=>this.onMouseUp(e)
    }
    //移动move
    onMouseMove(e: MouseEvent){
        let X = e.clientX-this.x
        let Y = e.clientY-this.y;
        if(X<10-this.el.offsetWidth){
            X=10-this.el.offsetWidth
        }else if(X>document.documentElement.clientWidth-10){
            X =document.documentElement.clientWidth-10
        }
        if(Y<10-this.el.clientHeight){
            Y=10-this.el.clientHeight
        }else if(Y>document.documentElement.clientHeight-10){
            Y =document.documentElement.clientHeight-10
        }
        this.el.style.left = X+'px'
        this.el.style.top = Y+'px'
    }
    //释放
    onMouseUp(e: MouseEvent){
        document.onmousemove = null
        document.onmouseup =null
        this.setEleStyle({'cursor': 'pointer'})
        this.el.setCapture&&this.el.setCapture() //释放全局捕获

    }
}
export const  drag = {
    mounted(el: any, binding: any) {
        new Drag(el,binding.value||{})
    }
}